<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>

/* let data = {
    name: '张三',
    age: 23,
    sex: '男'
}
console.log( data.name );
console.log( data.age );
console.log( data.sex );

function fn1(n,a,s){
    console.log( `大家好，我叫${n}，今年${a}岁，性别${s}` )
}
fn1(data.name,data.age,data.sex);

function fn2(obj){
    console.log( `大家好，我叫${obj.name}，今年${obj.age}岁，性别${obj.sex}` )
}
fn2(data); */

// 解构赋值
// 解析数据结构并对变量进行赋值
// 解构赋值通常用于对象和数组
// let data = {
//     name: '张三',
//     age: 23,
//     sex: '男'
// }
// // 对对象进行解构赋值时，左边的变量名必须与对象的key名一致
// let {name,sex,age,abc} = data;// 解构赋值
// console.log( name );// '张三'
// console.log( age );// 23
// console.log( sex );// '男'
// console.log( abc );// undefined

/* let arr = [12,35,27,17];
console.log( arr[0] );// 12
console.log( arr[1] );// 35
console.log( arr[2] );// 27
console.log( arr[3] );// 17
console.log( arr[4] );// undefined

// 对数组进行解构赋值时，左边变量的顺序一一对应数组中的数据
let [a,b,c,d,e] = arr;// 解构赋值
console.log( a );// 12
console.log( b );// 35
console.log( c );// 27
console.log( d );// 17
console.log( e );// undefined */


// 实参和形参的解构赋值：
let data = {
    name: '张三',
    age: 23,
    sex: '男',
    numbers: [12,13,14,15]
}
function fn3(obj){
    let {name,age,sex} = obj;
    console.log( `大家好，我叫${name}，今年${age}岁，性别${sex}` )
}
fn3(data);

function fn4({name,age,sex}){
    console.log( `大家好，我叫${name}，今年${age}岁，性别${sex}` )
}
fn4(data);// {name,age,sex} = data

let user_numbers = [12,13,14,15];
function fn5(a,b,c,d){
    console.log( a+b+c+d );
}
fn5(data.numbers[0],data.numbers[1],data.numbers[2],data.numbers[3]);

function fn6([a,b,c,d]){
    console.log( a+b+c+d );
}
fn6(data.numbers);

</script>
</body>
</html>